import { computed, CSSProperties, defineComponent } from 'vue';
import './SvgIcon.less';

export default defineComponent({
  name: 'SvgIcon',
  inheritAttrs: false,
  props: {
    prefix: {
      type: String as PropType<string>,
      default: 'icon',
    },
    name: {
      type: String as PropType<string>,
      required: true,
    },
    // 该属性经过修改已无效, 已使用font-size设置大小
    size: {
      type: [String, Number] as PropType<string | number>,
      default: () => {
        return 16;
      },
    },
    spin: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { attrs }) {
    const symbolId = computed(() => `#${props.prefix}-${props.name}`);
    const getStyle = computed((): CSSProperties => {
      const { size } = props;
      let s = `${size}`;
      s = `${s.replace('px', '')}px`;
      return {
        /*width: s,
        height: s,*/
      };
    });

    return () => (
      <>
        <svg class={['svg-icon', attrs.class, props.spin && 'svg-icon-spin']} style={getStyle.value} aria-hidden={true}>
          <use xlinkHref={symbolId.value} />
        </svg>
      </>
    );
  },
});
